<template>
  <div class="ship-info-card">
    <div class="info-card">
      <div class="info-item" v-for="item in list" :key="item.prop">
        <div class="item-icon">
          <el-image
            class="item-icon-image"
            :src="`/img/map/${item.icon || item.prop}.svg`"
          ></el-image>
        </div>
        <div class="item-value" v-if="typeof shipInfo[item.prop] === 'number'">
          {{ shipInfo[item.prop].toFixed(1) }}
        </div>
        <div class="item-value" v-else>{{ shipInfo[item.prop] }}</div>
        <div class="item-util" v-if="item.util">{{ item.util }}</div>
        <div class="item-name">{{ item.name }}</div>
        <div class="item-source" v-if="false">{{ item.source }}</div>
      </div>
      <div class="positioning-card">
        <div class="positioning-rows">
          <div class="positioning-number">
            <div
              class="positioning-value"
              v-if="typeof shipInfo.lat === 'number'"
            >
              {{ transfLonAndLat(shipInfo.lat, "lat", true) }}
            </div>
            <div class="positioning-value" v-else>
              {{ shipInfo.lat }}
            </div>
            <div
              class="positioning-value"
              v-if="typeof shipInfo.lon === 'number'"
            >
              {{ transfLonAndLat(shipInfo.lon, "lon", true) }}
            </div>
            <div class="positioning-value" v-else>
              {{ shipInfo.lon }}
            </div>
          </div>
          <div class="positioning-type" v-if="false">
            GPS1
          </div>
        </div>
      </div>
    </div>
    <div class="info-card bottm-card">
      <div class="bottm-item bottm-item-time">
        <div class="bottom-item-content">
          <div class="positioning-value">
            {{ time }}
          </div>
          <div class="positioning-value">
            {{ date }}
          </div>
        </div>
        <div
          class="bottm-item-title"
          @click="
            () => {
              timeShow = true;
            }
          "
        >
          {{ timezone[timeActive].title }}
        </div>
      </div>
      <div class="positioning-tips-list" v-show="timeShow">
        <div class="positioning-tips-item" @click="TimeSelect(0)">UTC Time</div>
        <div class="positioning-tips-item" @click="TimeSelect(1)">
          LOCAL Time
        </div>
      </div>
    </div>
    <div class="info-card middle-card">
      <ShipAttitude theme="light" :shipInfo="shipInfo" />
    </div>
  </div>
</template>

<script>
import { transfLonAndLat } from "@/utils/chart.js";
import ShipAttitude from "@/views/cabin/navigation/components/attitude.vue";
let interval = null;

export default {
  components: { ShipAttitude },
  props: {
    shipInfo: {
      type: Object,
      default: () => {
        return {
          lon: 0,
          lat: 0,
          hod: 0,
          rot: 0,
          cog: 0,
          sog: 0,
          stw: 0,
          xAxisAngle: 10,
          yAxisAngle: 20,
          tdt: 0,
          as: 0,
          stat: "",
        };
      },
    },
  },
  data() {
    return {
      transfLonAndLat,
      list: [
        {
          name: "HOD",
          prop: "hod",
          icon: "hdg",
          util: "°",
          source: "GPS1",
        },
        {
          name: "COG",
          prop: "cog",
          util: "°",
          source: "GPS1",
        },
        {
          name: "ROT",
          prop: "rot",
          util: "°",
          source: "GPS1",
        },
        {
          name: "SOG",
          prop: "sog",
          util: "Kn",
          source: "GPS1",
        },
        {
          name: "TDT",
          prop: "tdt",
          util: "NM",
          source: "GPS1",
        },
        {
          name: "AS",
          prop: "as",
          util: "Kn",
          source: "GPS1",
        },
        {
          name: "STAT",
          prop: "stat",
          util: "",
          source: "GPS1",
        },
      ],
      time: "00:00:00",
      date: "01-01-2000",
      timezone: [
        {
          title: "UTC Time",
          prop: "UTC",
        },
        {
          title: "LOCAL Time",
          prop: "Asia/Dubai",
        },
      ],
      timeActive: 0,
      timeShow: false,
    };
  },
  methods: {
    updateTime() {
      const timezone = this.timezone[this.timeActive].prop;
      const now = new Date();

      // 使用指定时区格式化时间
      const options = {
        timeZone: timezone,
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false, // 24小时制
      };

      const formatter = new Intl.DateTimeFormat("en-GB", options);
      const parts = formatter.formatToParts(now);

      const getPart = (type) => parts.find((p) => p.type === type)?.value;

      const day = getPart("day");
      const month = getPart("month");
      const year = getPart("year");

      const hours = getPart("hour");
      const minutes = getPart("minute");
      const seconds = getPart("second");

      this.date = `${day}-${month}-${year}`; // 格式：日-月-年
      this.time = `${hours}:${minutes}:${seconds}`; // 格式：时:分:秒
    },
    TimeSelect(index) {
      this.timeActive = index;
      this.timeShow = false;
    },
  },
  mounted() {
    interval = setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  destroyed() {
    clearInterval(interval);
  },
};
</script>

<style scoped lang="scss">
.ship-info-card {
  background-color: #e0e0e0;
  box-shadow: 2px 0px 10px #333;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  .info-card {
    padding: 15px 0;
    background-color: #eee;
    .info-item {
      padding: 0 10px 0 20px;
      height: 50px;
      display: flex;
      align-items: center;
      .item-icon {
        width: 30px;
        height: 30px;
        .item-icon-image {
          width: 100%;
          height: 100%;
        }
      }
      .item-value {
        font-size: 26px;
        color: $light-theme-color;
        flex: 1;
        text-align: right;
        font-weight: 700;
      }
      .item-util {
        width: 20px;
        color: $light-theme-color;
        font-size: 14px;
        margin-left: 5px;
      }
      .item-name {
        width: 45px;
        text-align: right;
        color: #000;
        font-weight: 700;
        font-size: 16px;
        height: 100%;
        line-height: 55px;
      }
      .item-source {
        width: 85px;
        padding-left: 15px;
        font-size: 16px;
        color: #666;
        position: relative;
        &:after {
          content: "";
          position: absolute;
          transform: translate(-50%, -50%);
          top: 50%;
          right: 0;
          border-left: 6px solid transparent; /* 左侧透明 */
          border-right: 6px solid transparent; /* 右侧透明 */
          border-top: 8px solid #c9c9c9; /* 实线三角形 */
        }
      }
    }
    .positioning-card {
      padding: 0 10px;
      .positioning-rows {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .positioning-number {
          flex: 1;
          height: 100%;
          padding: 10px 10px 0 0;
          position: relative;
          .positioning-value {
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: right;
            color: $light-theme-color;
            font-size: 26px;
            font-weight: 700;
          }
        }
        .positioning-type {
          width: 85px;
          padding-left: 15px;
          font-size: 16px;
          color: #666;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            right: 0;
            border-left: 6px solid transparent; /* 左侧透明 */
            border-right: 6px solid transparent; /* 右侧透明 */
            border-top: 8px solid #c9c9c9; /* 实线三角形 */
          }
        }
      }
    }
  }
  .middle-card {
    border-top: 2px solid #aaa;
    height: 240px;
    overflow: hidden;
  }
  .bottm-card {
    padding: 0 20px;
    border-top: 2px solid #ddd;
    position: relative;
    .bottm-item {
      height: 100px;
      border-bottom: 1px solid #ddd;
      &:last-of-type {
        border: 0;
      }
      .bottm-item-title {
        height: 50px;
        line-height: 50px;
        color: $light-theme-color;
        font-size: 22px;
        text-align: right;
        position: relative;
        padding-right: 30px;
        cursor: pointer;
        &:after {
          content: "";
          position: absolute;
          transform: translate(-50%, -50%);
          top: 50%;
          right: 0;
          border-left: 6px solid transparent; /* 左侧透明 */
          border-right: 6px solid transparent; /* 右侧透明 */
          border-top: 8px solid #c9c9c9; /* 实线三角形 */
        }
      }
      .bottom-item-content {
        display: flex;
        justify-content: right;
        align-items: center;
        flex-wrap: wrap;
        .bottom-item-value {
          font-weight: 700;
          font-size: 30px;
          color: $light-theme-color;
        }
        .bottom-item-util {
          width: 20px;
          color: #2b579a;
          font-size: 14px;
          margin-left: 5px;
        }
      }
    }
    .bottm-item-time {
      height: 150px;
      .bottom-item-content {
        height: 100px;
        .positioning-value {
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          justify-content: right;
          font-weight: 700;
          font-size: 26px;
          color: $light-theme-color;
        }
      }
    }
    .positioning-tips-list {
      box-shadow: 0px 0px 5px #666;
      position: absolute;
      z-index: 2;
      overflow: hidden;
      top: 97%;
      width: 130px;
      right: 20px;
      background-color: #f0f0f0;
      border-radius: 5px;
      .positioning-tips-item {
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        text-align: right;
        padding: 0 15px;
        font-size: 16px;
        color: #666;
        border-bottom: 1px solid #ccc;
        &:hover {
          color: $light-theme-color;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
